<template>
	<view class="u-p-40 page u-font-28">
		<view class="itembox u-radius-5 u-p-20 " v-for="i in unitlist">
			<view class="flex-between  " >
				<text>{{i.addr}}</text>
				<view class="role u-radius-5 u-shrink-no flex-center" v-if="!i.has_pass" @click="show=true,community_unit_id=i.room_id">
					<image src="../../static/zxcimg/bluetime.png" class="w26 h26 u-m-r-10" mode=""></image>
					<text >生成</text>
				</view>
				<view class="detail u-radius-5 flex-center" v-else @click="imgurl=i.url,address=i.addr,end_time=i.end_time,community_unit_id=i.room_id,popshow=true" >
					<text>查看</text>
				</view>
				
			</view>
			<view class="" >
				房间号：{{i.room_name}}
			</view>
			<view class="u-m-tb-8" v-if="i.password">
				密码：{{i.password}}
			</view>
			<view class="" style="color: #F05D5D;" v-if="i.end_time">
				有效期：{{i.end_time}}
			</view>
			
		</view>

		<u-picker @confirm="confirm1" @close='show=false' @cancel='show=false' :closeOnClickOverlay='true' :show="show"
			:columns="columns"></u-picker>

		<u-popup :show="popshow" :round="10" @close="popshow=false" mode="center" :closeable='true' >
			<view class="u-p-40" style="box-sizing: border-box; width: 666rpx;">
				<view class="flex-center u-m-tb-30">
					{{address}}
				</view>
				<view class="flex-center u-m-tb-20">
					<image :src="imgurl" class="w400 h400 " mode=""></image>
				</view>
				<view class="u-m-tb-30 flex-center" style="color: #AB433E;">
					有效期至：{{end_time}}
				</view>
				<!-- <view class="u-m-t-60 flex-center">
					分享访客
				</view> -->
				<button class="u-m-t-60 flex-center"  @click="show=true,popshow=false">
					重新生成
				</button>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgurl:'',
				address:'',
				end_time:'',
				show: false,
				popshow:false,
				columns: [
					['有效期0.5小时', '有效期1小时', '有效期2小时']
				],
				unitlist:[],
				hour:0,
				community_unit_id:0,
				id:0,
				pwdinfo:{}
			};
		},
		onLoad() {
			this.init()
		},
		methods:{
			init(){
				this.$api.get('/door_pass/qrcode_list').then(res=>{
					this.unitlist = res.data
				})
			},
			
			confirm1(e){
				console.log(e.indexs[0]);
				if(e.indexs[0]==0){
					this.hour = 0.5
				} else if(e.indexs[0]==1){
					this.hour = 1
				}else{
					this.hour = 2
				}
				
				this.$api.post('/door_pass/add_qrcode',{
					form:{
						room_id:this.community_unit_id,
						hour:this.hour
					}
				}).then(res=>{
					this.init()
					this.show = false
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #eff4f7;
		min-height: calc(100vh - var(--window-top) - var(--window-bottom));

		.itembox {
			background-color: #fff;
		}

		.role {
			background-color: #E2F2FF;
			padding: 2px 8px;
			color: #409EFF;
		}

		.detail {
			background-color: #BBF7DC;
			padding: 2px 8px;
			color: #25CE93;
		}
	}
</style>